Cli

發現一個很棒的參考網站：搞搞就懂 [Vue] 跟著 Vue 闖盪前端世界 - 08 網站路由 vue-router 這位作者其他篇在Cli安裝跟資料夾結構介紹也有圖解解說
還有一個感覺也很有系統，但在router配置的介紹篇幅較少，左側欄有新手faq：Vue-cli 基礎入門 - 2018 Router 配置
官網：Vue Router

進入正文

我們在安裝時是選擇不安裝router，手動自己操作先了解過流程，之後再建立時就可直接選擇安裝。
先在終端機輸入指令

npm install vue-router

然後在 src目錄下新建立資料夾 router，router 目錄下新建 index.js檔案(路由配置檔)，此配置檔需載入官方組件 vue, vue-router，這裡直接複製官網即可
(index.js)

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

再載入自訂組件，那些將來會在components目錄下產生的組件
(index.js)

import pageName from '@/components/HelloWorld'; //HelloWorld是cli初始內建的組件，拿它來做範例

要寫指令匯出給 main.js使用
(index.js)

export default new VueRouter({
    routes: [
      {
        name: '首頁',
        path: '/index',
        component: pageName, //對應的元件
      }
    ],
});

再到 main.js 進行import

import router from './router';

new Vue({
  statements
  router, //還要記得加入這行
});

放上頁面
(App.vue)

<template>
  ...其他內容
  <router-view></router-view>
</template>

終端機輸入

npm run dev

打開網頁檢視，會看到只剩logo，但是上方網址列多了一個#。接著在網址列#後方輸入剛剛index.js export給path:的值index
然後開啟開發者工具 > vue 可以看到如下
<HelloWorld>router-view: /index
就成功囉！

小結

來整理一下邏輯就不會亂了：
1.放一張桌子：先在終端機安裝router
2.攤開地圖紙：在src/router下製造index.js
3.拿畫圖工具：import官方組件、自訂組件
4.開始畫：export name path component
5.畫到懷疑人生，而生命總要找到出口：剛export完要找地方import，去main.js
6.張貼藏寶圖：<router-view>

第5.很牽強，不過就暫時這樣吧，希望不是看了之後又更亂了，至少筆者本身沒有更亂